<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="goodsData" label-width="100px">
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="竞品名称：">
              {{goodsData.goodsName}}
            </el-form-item>
            <el-form-item label="竞品图片：">
              <div class="img-box">
                <el-image v-for="item in goodsData.imgId==null?[]:this.goodsData.imgId.split(',')" :key="item" :src="'http://101.43.223.224:8765/image/getImageById?id='+item"></el-image>
              </div>
            </el-form-item>
            <el-form-item label="联系人：">
              {{goodsData.contactName}}
            </el-form-item>
            <el-form-item label="手机号：">
              {{goodsData.phone}}
            </el-form-item>
            <el-form-item label="起拍价:">
              <span style="color:#D7000F;font-size: 24px;margin-right: 10px;">¥</span>
              <el-input-number v-model="goodsData.startPrice" controls-position="right" @change="handleChange"
              :min="100" :max="100000000" :step="100" :precision="2" ></el-input-number>
            </el-form-item>
            <el-form-item label="保证金金额:">
              <span style="color:#D7000F;font-size: 24px;margin-right: 10px;">¥</span>
              <el-input-number v-model="goodsData.earnestMoney" controls-position="right" @change="handleChange"
              :min="0" :max="1000000" :step="100" :precision="2" ></el-input-number>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="重量:">
              <el-input-number v-model="goodsData.weight" controls-position="right" @change="handleChange"
              :min="0" :max="1000000" :step="1" :precision="2" ></el-input-number>
              <span style="color:#D7000F;font-size: 18px;font-weight:bold;margin-left: 10px;">千克</span>
            </el-form-item>
            <el-form-item label="数量:">
              <el-input-number v-model="goodsData.number" controls-position="right" @change="handleChange"
              :min="0" :max="1000000" :step="1"></el-input-number>
            </el-form-item>
            <el-form-item label="开拍时间:">
              <el-date-picker
                v-model="goodsData.startTime"
                value-format="yyyy-MM-dd HH:ss:mm"
                type="datetime"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:ss:mm"
                @change="getDuration()">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间:">
              <el-date-picker
                v-model="goodsData.endTime"
                value-format="yyyy-MM-dd HH:ss:mm"
                type="datetime"
                placeholder="选择日期时间"
                @change="getDuration()"
                format="yyyy-MM-dd HH:ss:mm">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="竞拍时间:">
              <div class="time-box">{{duration}}</div>
            </el-form-item>
            <el-form-item label="延时:">
              <el-input-number v-model="goodsData.delayMinutes" controls-position="right" @change="handleChange"
              :min="0" :max="60" :step="5" ></el-input-number>
              <span style="color:#D7000F;font-size: 18px;font-weight:bold;margin-left: 10px;">分钟</span>
            </el-form-item>
            <el-form-item label="竞品类型:">
              <el-select v-model="goodsData.auctionType" placeholder="请选择">
                <el-option
                  v-for="item in auctionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="交易方式:">
              <el-radio v-model="goodsData.transactionType" label="1">自提</el-radio>
              <el-radio v-model="goodsData.transactionType" label="2">邮寄</el-radio>
            </el-form-item>
            <el-form-item label="交易地址:">
                <el-cascader
                  size="large"
                  :options="options"
                  v-model="goodsData.transactionAddress"
                  @change="handleChange">
                </el-cascader>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-form-item label-width="0" >
          <div style="text-align: center;margin-top: 20px;">
            <el-button type="primary" @click="publishUpdate()">提交</el-button>
            <el-button>取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  name: 'AuctionPcSetAuctionInfoPage',

  data () {
    return {
      goodsId: 26, // 商品id
      goodsData: {}, // 商品信息
      duration: '', // 竞拍时长
      options: regionData,
      auctionTypeOptions: [{
        value: '1',
        label: '车'
      }, {
        value: '2',
        label: '房'
      }, {
        value: '3',
        label: '古玩'
      }, {
        value: '4',
        label: '奢侈品'
      }, {
        value: '5',
        label: '艺术'
      }, {
        value: '6',
        label: '玉翠珠宝'
      }],
      CodeToText,
      TextToCode
    }
  },

  mounted () {
    this.getGoodsById()
  },

  methods: {
    // 设置拍卖信息
    publishUpdate () {
      console.log(this.goodsData)

      this.goodsData.checkStatus = 4
      this.$axios.post('/publish/publishUpdate', this.goodsData).then(res => {
        if (res.data.flag) {
          this.$router.push({
            path: '/auctionView'
          })
          this.myMessage('success', '设置成功')
        } else {
          this.myMessage('success', '设置失败')
        }
      })
    },
    // 获取当前选中的地区
    handleChange (value) {
      if (this.CodeToText[value[1]] === '市辖区') {
        this.goodsData.transactionAddress = this.CodeToText[value[0]] + this.CodeToText[value[2]]
      } else {
        this.goodsData.transactionAddress = this.CodeToText[value[0]] + this.CodeToText[value[1]] + this.CodeToText[value[2]]
      }
      console.log(this.goodsData.transactionAddress)
    },
    // 获取竞拍时长
    getDuration () {
      if (this.goodsData.startTime !== '' && this.goodsData.endTime !== '') {
        const dateBegin = new Date(this.goodsData.startTime)// 将-转化为/，使用new Date
        const dateEnd = new Date(this.goodsData.endTime)// 将-转化为/，使用new Date
        const dateDiff = dateEnd.getTime() - dateBegin.getTime()// 时间差的毫秒数
        const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))// 计算出相差天数
        const leave1 = dateDiff % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
        const hours = Math.floor(leave1 / (3600 * 1000))// 计算出小时数
        // 计算相差分钟数
        const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
        const minutes = Math.floor(leave2 / (60 * 1000))// 计算相差分钟数
        // 计算相差秒数
        const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
        const seconds = Math.round(leave3 / 1000)
        console.log(' 相差 ' + dayDiff + '天 ' + hours + '小时 ' + minutes + ' 分钟' + seconds + ' 秒')
        this.duration = dayDiff + '天 ' + hours + '小时 ' + minutes + ' 分钟' + seconds + ' 秒'
      } else {
        this.duration = '请设置起止时间'
      }
    },
    // 查询当前商品id
    async getGoodsById () {
      this.$axios.get('/client/auction/getGoodsById', {
        params: {
          goodsId: this.goodsId
        }
      }).then(res => {
        if (res.data.flag) {
          debugger
          this.goodsData = res.data.obj
          // 地区文字转code
          const area = this.getArea(this.goodsData.transactionAddress)
          if (TextToCode[area.Province] === undefined) {
            this.goodsData.transactionAddress = TextToCode[area.City]['市辖区'][area.Country].code
          } else {
            this.goodsData.transactionAddress = TextToCode[area.Province][area.City][area.Country].code
          }
          console.log(this.goodsData)
        } else {
          this.myMessage('商品加载失败', 'error')
        }
      })
    },
    // 省市区截取
    getArea (str) {
      const area = {}
      let index11 = 0
      const index1 = str.indexOf('省')
      if (index1 === -1) {
        index11 = str.indexOf('自治区')
        if (index11 !== -1) {
          area.Province = str.substring(0, index11 + 3)
        } else {
          area.Province = str.substring(0, 0)
        }
      } else {
        area.Province = str.substring(0, index1 + 1)
      }

      const index2 = str.indexOf('市')
      if (index11 === -1) {
        area.City = str.substring(index11 + 1, index2 + 1)
      } else {
        if (index11 === 0) {
          area.City = str.substring(index1 + 1, index2 + 1)
        } else {
          area.City = str.substring(index11 + 3, index2 + 1)
        }
      }
      let index3 = str.lastIndexOf('区')
      if (index3 === -1) {
        index3 = str.indexOf('县')
        area.Country = str.substring(index2 + 1, index3 + 1)
      } else {
        area.Country = str.substring(index2 + 1, index3 + 1)
      }
      return area
    },

    // 我的信息
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<!-- <style lang="scss" scoped> -->
<style>
  .box-card{
    width:60%;
    margin:0 auto;
    padding: 20px;
  }
  .img-box{
    width:250px;
    height:200px;
    overflow: hidden;
    text-align: center;
    line-height: 200px;
  }
  .time-box{
    font-size: 24px;
    color: #D7000F;
    font-weight: bold;
  }
</style>
